<template>
  <div class="container">
    <!-- 正在热映 -->
    <div class="movieitem" @click="handleClick(movie)">
      <div class="img">
        <img :src="'http://localhost:3001/' + movie.article_picture" alt="" />
      </div>
      <div class="describe">
        <p class="title">{{ movie.article_title }}</p>
        <p>{{ movie.article_date }}</p>
        <p>点击:{{ movie.article_views }}</p>
        <p>评论:{{ movie.count }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // flag: true,
    }
  },
  props: {
    movie: {
      type: Object,
    },
  },
  methods: {
    handleClick(movie) {
      // console.log(movie)
      //点击跳转到相应的电影详情页(并传参!!)
      //console.log(movie.article_id)
      movie.article_views += 1
      var id = movie.article_id
      this.$router.push({
        path: `/detail/${id}`,
      })
    },
    // handleGood() {},
  },
}
</script>

<style scoped>
.container {
  padding: 0 20px;
}
.movieitem {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(203, 202, 202);
  cursor: pointer;
  margin-bottom: 5px;
}
.img {
  width: 150px;
  height: 200px;
}
.img img {
  width: 100%;
  height: 100%;
}
.describe {
  width: 400px;
  height: 200px;
  margin-left: 15px;
  font-size: 15px;
}
.describe .title {
  font-size: 20px;
  color: black;
}
.describe .raiting {
  display: inline-block;
  color: orange;
}

p {
  display: inline-block;
  margin: 15px 5px;
  color: #999;
}
</style>
